<script setup>
import { useArgStore } from "@/stores";
import { ref, inject, watch, computed, nextTick } from "vue";
import BasicArguments from "@/components/BasicArguments.vue";
import Chart from "@/components/Chart.vue";
import { huiduService } from "@/api/approach.js";

// 刷新自己
const reload = inject("reload");
// 刷新子组件
const isSonActive = ref(true);
const refresh = () => {
  isSonActive.value = false;
  nextTick(() => {
    isSonActive.value = true;
  });
};

// 初始化数据
const row = ref(0);
const col = ref(0);
const args = ref([]);
const tableHead = ref([]);
const qs = ref([]);
// 转换字符串数组为对象数组，每个对象有一个 'item' 键
const qsObj = ref([]);
const getArgsList = () => {
  const argStore = useArgStore();
  row.value = argStore.row;
  col.value = argStore.col;
  args.value = argStore.getArgs();
  tableHead.value = argStore.getTableHead();
  qs.value = Array(row.value + 1).fill(0);
  qsObj.value = qs.value.map((item) => ({ item }));
};
getArgsList();

// 计算
const basicArgsRef = ref(null);
const ans = ref([]);
const calculate = async () => {
  const params = basicArgsRef.value.getArgs();
  // 表格被修改过，所以要更新自己的数据
  qs.value = params.qs;
  for (let i = 0; i < qs.value.length; i++) {
    qsObj.value[i].item = qs.value[i];
  }
  // 发请求
  const res = await huiduService(params);
  ans.value = res.data.data.data;
  // 刷新子组件
  refresh();
};
</script>

<template>
  <el-row class="row-bg">
    <el-col :span="3">
      <div class="grid-content ep-bg-purple">
        <h3>灰色关联度分析法</h3>
      </div>
    </el-col>
    <el-col :span="1">
      <div class="grid-content ep-bg-purple-light">
        <el-button type="warning" plain @click="calculate" class="calculate"> 计算 </el-button>
      </div>
    </el-col>
  </el-row>

  <basic-arguments
    v-if="isSonActive"
    ref="basicArgsRef"
    :row="row"
    :col="col"
    :argList="args"
    :tableHead="tableHead"
    :qs="qsObj"
    :ans="ans"
  ></basic-arguments>
  <chart :row="row" :col="col" :argList="args" :tableHead="tableHead"></chart>
</template>

<style lang="scss" scoped>
.calculate {
  margin-top: 15px;
  width: 100px;
}
</style>